<template>
  <view class="min-h-screen bg-[#F8F8F8]">
    <view class="sticky_wrap">
      <view :style="{ height: bottom + 'px', paddingTop: top + 'px' }" class="text-center relative bg-white ">
        <image class="w-[80rpx] h-[80rpx] rounded-full absolute left-[36rpx] bottom-[8rpx]"
          src="https://gangantao.com/image/20241216/489657c8-7f43-436b-a626-c1d7e390588a.png"></image>
        <view :style="{ height: pendantHight + 'px' }"
          class="flex items-center justify-center text-[40rpx] text-[#3D3D3D]">熊猫校友会</view>
      </view>
      <view class="flex items-center justify-between pl-[22rpx] pr-[30rpx] py-[16rpx] bg-[#F8F8F8]">
        <view @click="navigateTo('/pages/serviceCity/serviceCity')" class="flex items-center"><text
            class="mr-[5rpx] text-[#3D3D3D]">南宁</text><u-icon name="arrow-right" color="#575B66" size="16"></u-icon>
        </view>
        <view @click="navigateTo('/pages/search/search')" class="mx-[16rpx] flex-1"> <u-search disabled bgColor="#fff"
            :showAction="false" placeholder="搜索课程" v-model="course"></u-search></view>

        <view @click="navigateTo('/pages/getCredit/getCredit')" class="text-[#3D3D3D]">领学分</view>
      </view>
    </view>
    <view class=" bg-white px-[10rpx] py-[8rpx]">
      <uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" mode="round" field="content">
        <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
          <swiper-item v-for="(item, index) in info" :key="index">
            <image mode="aspectFill" :src="item.url" class=" w-[100%] h-[348rpx]"></image>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="mt-[20rpx] px-[38rpx] flex justify-between bg-white pt-[14rpx] pb-[20rpx] text-[32rpx] font-normal">
      <view @click="show = true" class="flex flex-col justify-center items-center">
        <image class="h-[110rpx] w-[110rpx]"
          src="https://gangantao.com/image/20241216/17beab71-04fd-415d-bae7-7f7734425ae8.png"></image>
        <view class="mt-[24rpx]">每日一题</view>
      </view>
      <view @click="navigateTo('/pages/alumniAssociation/alumniAssociation')"
        class="flex flex-col justify-center items-center">
        <image class="h-[110rpx] w-[110rpx]"
          src="https://gangantao.com/image/20241216/7b2a27c8-d3b8-494c-834e-5a097144bc1c.png"></image>
        <view class="mt-[24rpx]">校友会</view>
      </view>
      <view @click="navigateTo('/pages/university/university')" class="flex flex-col justify-center items-center">
        <image class="h-[110rpx] w-[110rpx]"
          src="https://gangantao.com/image/20241216/1a82eca6-3b8e-425c-984a-a58d34b1c110.png"></image>
        <view class="mt-[24rpx]">老年大学</view>
      </view>
      <view class="flex flex-col justify-center items-center">
        <image class="h-[110rpx] w-[110rpx]"
          src="https://gangantao.com/image/20241216/1ee10869-16bf-4e3a-b607-4aad213c4534.png"></image>
        <view class="mt-[24rpx]">精选推荐</view>
      </view>
    </view>
    <view class="text-[36rpx] pt-[20rpx] flex items-center">
      <view @click="tabs = 0"
        :class="tabs == 0 ? 'font-bold text-[#FD755D] border-b-[5rpx] border-[#FD755D]' : 'text-[#434141]'"
        class="mr-[36rpx] ml-[32rpx] ">缤纷在线</view>
      <view @click="tabs = 1"
        :class="tabs == 1 ? 'font-bold text-[#FD755D] border-b-[5rpx] border-[#FD755D]' : 'text-[#434141'">附近课堂</view>
    </view>
    <view v-for="(item, index) in list" :key="index" @click="onCkils.go(item.classes_id) "
      class="mt-[16rpx] shadow ml-[12rpx] mr-[18rpx] bg-white pl-[30rpx] pr-[10rpx] pt-[20rpx]">
      <view class="text-[#3D3D3D]  mb-[12rpx] flex justify-between items-end"><text
          class="text-[32rpx]">{{ item.ocation_name }}</text><text class="text-[28rpx] ">{{ item.km.toFixed(2) }}km</text>
      </view>
      <view class="flex pb-[26rpx]">
<!--        <image class="w-[220rpx] h-[220rpx]" :src="item.cover"></image> -->
        <image class="w-[220rpx] h-[220rpx]" :src="getDataUril.getSplitImgUrl(item.cover)"></image>
        <view class="ml-[16rpx] flex-1 flex flex-col justify-between h-[200rpx]">
          <view class="flex items-start justify-between w-full">
            <view class="flex items-start">
              <view class=" text-white text-[28rpx] bg-[#FD755D] rounded px-1  mr-[12rpx] tracking-wider">
                {{ item.address_lv_octionlevel }}</view>  
            </view>
            <view class="text-[#FF0000] text-[44rpx]">{{ item.price }}元</view>
          </view>
          <view class="text-[32rpx] text-[#3D3D3D]">{{ item.project_name }}</view>
            <view class="text-[28rpx] text-[#3D3D3D] ">{{ item.className }}</view>
          <view class="text-[28rpx] text-[#3D3D3D] ">{{ item.start_date }}</view>
          <view class="flex items-end justify-between">
            <view class="flex">
              <view v-for="(items, indexs) in item.tags" :key="indexs"
                class=" text-white text-[28rpx] bg-[#FFA812] rounded px-1 mr-[12rpx]">{{ items }}</view>
            </view>
            <view v-if="item.rel_type == 1" class=" text-white py-[10rpx] px-4 bg-[#FD755D] rounded  text-[32rpx]">报名</view>
            <view v-if="item.rel_type == 2" class=" text-white py-[10rpx] px-4 bg-[#FD755D] rounded  text-[32rpx]">预约</view>
          </view>
        </view>
      </view>
    </view>
    <view :style="{ height: (150 + iosHight) + 'rpx' }"></view>
    <Tabbar currentPage="0"></Tabbar>
  </view>
  <noLogin @offNlogin="offNlogin" :show="show"></noLogin>
</template>

<script setup>
import Tabbar from "@/components/tabbar.vue";
import noLogin from "@/components/noLogin.vue";
import api from "@/api/api"
import Home from "@/api/Home"
import { useUserStore } from '@/stores/userinfo'
import { ref, reactive } from "vue"
import {
	baseUrl
} from '@/utils/baseUrl.js';  
const position = reactive({
  longitude: null,
  latitude: null
})
const tabs = ref(0)
const res = wx.getMenuButtonBoundingClientRect()
const bottom = ref(res.bottom + 8)//胶囊距底部间距
const top = ref(res.top) //胶囊距上距离
const pendantHight = ref(res.bottom - res.top) //胶囊高度
const show = ref(false)
const course = ref('')//课程
const iosHight = ref(0)//兼容ios

const list = ref([])
const info = ref([
  {
    url: 'https://www.aqvtc.edu.cn/_upload/article/images/75/c2/589547794559a79e48ba9ab6fdfa/469aac11-9132-4451-a77a-019a3324ba9c_d.jpg',
  }
])
const current = ref(0)
const getDataUril = reactive({
  getSplitImgUrl(IngUrl){
    return baseUrl+IngUrl
  }
})
//获取经纬度
const locationData =reactive({
    latitude:'',//用户纬度
    longitude:'',//用户经度
    getLocation(){
      uni.getLocation({
        type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
        success: function (res) {
          const latitude = res.latitude;
          const longitude = res.longitude;
          const accuracy = res.accuracy;
          const speed = res.speed;
          const altitude = res.altitude;
          const verticalAccuracy = res.verticalAccuracy;
          const horizontalAccuracy = res.horizontalAccuracy;
          
          console.log('纬度：' + latitude);
          console.log('经度：' + longitude);
          console.log('精确度：' + accuracy);
          console.log('速度：' + speed);
          console.log('海拔：' + altitude);
          console.log('垂直精确度：' + verticalAccuracy);
          console.log('水平精确度：' + horizontalAccuracy);
          locationData.latitude = latitude
          locationData.longitude = longitude
        },
        fail: function (e) {
          console.log('获取位置信息失败：' + JSON.stringify(e));
        }
      });
    }
})
locationData.getLocation()
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'ios') {
  iosHight.value = 50
} else {
  iosHight.value = 0
}
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}

const offNlogin = () => {
  show.value = false
}
const getList = async () => { 
      uni.showLoading({ title: "加载中" }) 
      const res = await Home.getNearAndColorfulList({
        latitude: locationData.latitude,
        longitude: locationData.longitude, 
      })
      if (res.code == 200) {
        list.value = res.data
      }

      uni.hideLoading()
  


}


const onCkils = reactive({
  go: async(classes_id) =>{
    navigateTo('/pages/eventDetails/eventDetails?classes_id='+classes_id)
  }  
})
onLoad(() => { getList()})

</script>

<style lang="scss" scoped>
.sticky_wrap {
  position: sticky;
  /* 吸顶内容 距离 顶部的高度 */
  top: 0rpx;
  z-index: 999;
}
</style>